<template>
	<view class="page">
			
		<view class="cu-list menu ">
				<view class="cu-item arrow">
					<view class="content">
						<!-- <text class="cuIcon-circlefill text-grey"></text> -->
						<text class="text-grey">员工性别</text>
					</view>
					<view class="action">
						<picker @change="sexChange" :value="sexIndex" :range="sexPicker">
							<view class="picker input">
								{{sexIndex>-1?sexPicker[sexIndex]:'请选择'}}
							</view>
						</picker>
					</view>
				</view>
				<view class="cu-item ">
					<view class="content">
						<text class="text-grey">员工年龄</text>
					</view>
					<view class="action">
						<input class="input" type="number" :maxlength="10" v-model="age"
						placeholder="请输入" placeholder-class="placeholder" />
					</view>
				</view>
				<view class="cu-item ">
					<view class="content">
						<text class="text-grey">是否有事实用工关系</text>
						<image src="/static/images/info.png" class="png" mode="aspectFit" 
						@click="showInfo('确定单位是否与你有真实的劳动关系，最简单的判断标准是：员工是否接受公司的考勤管理、奖惩制度等')"></image>
					</view>
					<view class="action">
						<switch @change="employChange" :class="employIndex?'checked':''" 
						:checked="employIndex?true:false" ></switch>
					</view>
				</view>
				<view class="cu-item ">
					<view class="content">
						<text class="text-grey">是否有签订劳动合同</text>
						<image src="/static/images/info.png" class="png" mode="aspectFit"
						@click="showInfo('注意签订的一定是劳动合同，而不是劳务合同等')"></image>
					</view>
					<view class="action">
						<switch @change="conChange" :class="conIndex?'checked':''"
						:checked="conIndex?true:false" ></switch>
					</view>
				</view>
				<view class="cu-item arrow">
					<view class="content">
						<text class="text-grey">合同约定地点</text>
						<image src="/static/images/info.png" class="png" mode="aspectFit"
						@click="showInfo('未签订合同可选择公司注册地点，城市名称')"></image>
					</view>
					<view class="action">
						<!-- <input class="input" type="text" :maxlength="10" v-model="address"
						placeholder="请输入" placeholder-class="placeholder" /> -->
						<uni-citys :city="address" @cityPicker='cityPicker'></uni-citys>
					</view>
				</view>
				<view class="cu-item ">
					<view class="content">
						<text class="text-grey">最低工资标准</text>
						<image src="/static/images/info.png" class="png" mode="aspectFit"
						@click="showInfo('如最低工资标准有误可自行修改')"></image>
					</view>
					<view class="action">
						<input class="input" type="digit" :maxlength="15" v-model="lessPay"
						placeholder="请输入" placeholder-class="placeholder" />
					</view>
				</view>
				<view class="cu-item ">
					<view class="content">
						<text class="text-grey">合同约定工资数</text>
					</view>
					<view class="action">
						<input class="input" type="digit" :maxlength="15" v-model="contractPay" 
						placeholder="请输入" placeholder-class="placeholder" /></view>
				</view>
				<view class="cu-item ">
					<view class="content">
						<text class="text-grey">全勤实际发放工资数</text>
						<image src="/static/images/info.png" class="png" mode="aspectFit"
						@click="showInfo('注意是全勤实发工资')"></image>
					</view>
					<view class="action">
						<input class="input" type="digit" :maxlength="15" v-model="allPay"
						placeholder="请输入" placeholder-class="placeholder" />
					</view>
				</view>
				<view class="cu-item ">
					<view class="content">
						<text class="text-grey">工资发放时间是否有跨月</text>
					</view>
					<view class="action">
						<switch @change="mChange" :class="mIndex?'checked':''"
						:checked="mIndex?true:false" ></switch>
					</view>
				</view>
				<view class="cu-item ">
					<view class="content">
						<text class="text-grey">实际购买社保基数</text>
						<image src="/static/images/info.png" class="png" mode="aspectFit"
						@click="showInfo('如未购买社保填写0即可')"></image>
					</view>
					<view class="action">
						<input class="input" type="digit" :maxlength="10" v-model="sPay"
						placeholder="请输入" placeholder-class="placeholder" />
					</view>
				</view>
				<view class="cu-item ">
					<view class="content">
						<text class="text-grey">是否有加班</text>
					</view>
					<view class="action">
						<switch @change="addChange" :class="addIndex?'checked':''"
						:checked="addIndex?true:false" ></switch>
					</view>
				</view>
				<view class="cu-item ">
					<view class="content">
						<text class="text-grey">加班费是否足额支付</text>
						<image src="/static/images/info.png" class="png" mode="aspectFit"
						@click="showInfo('1.平时加班费每小时是否大于合同约定工资/174*1.5，2.周末加班费是否大于合同约定工资/174*2，3.如1和2任意一项未满足则均选没有')"></image>
					</view>
					<view class="action">
						<switch @change="addpayChange" :class="addpayIndex?'checked':''"
						:checked="addpayIndex?true:false" ></switch>
					</view>
				</view>
				<view class="cu-item ">
					<view class="content">
						<text class="text-grey">本单位工作月份数</text>
					</view>
					<view class="action">
						<input class="input" type="number" :maxlength="10" v-model="month"
						placeholder="请输入" placeholder-class="placeholder" />
					</view>
				</view>
				<view class="cu-item ">
					<view class="content">
						<text class="text-grey">前12个月实发月平均工资</text>
						<image src="/static/images/info.png" class="png" mode="aspectFit"
						@click="showInfo('如果上班不满12个月，就按实际上班的月平均工资计算')"></image>
					</view>
					<view class="action">
						<input class="input" type="digit" :maxlength="15" v-model="avgPay"
						placeholder="请输入" placeholder-class="placeholder" />
					</view>
				</view>
				<view class="cu-item arrow">
					<view class="content">
						<text class="text-grey">选择离职方式</text>
					</view>
					<view class="action">
						<picker @change="quitChange" :value="quitIndex" :range="quitPicker">
							<view class="picker input">
								{{quitIndex>-1?quitPicker[quitIndex]:'请选择'}}
							</view>
						</picker>
					</view>
				</view>
				<view class="cu-item ">
					<view class="content">
						<view class="cu-btn round bg-blue " @tap="getResult()">查看测算结果</view>
					</view>
				</view>
				
			</view>
		<view class="cu-modal" :class="modalName=='gridModal'?'show':''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop>
				
				<view class="cu-list menu text-left solid-top" style="height: 300px;margin: 0;">
					<view class="cu-item">
						<view class="content">
							<view class="text-blue" style="justify-content: center;">劳动权益测算结果</view>
						</view>
					</view>
					<view class="cu-item ">
						<view class="content">
							<text class="text-grey ">{{resultList}}</text>
						</view>
					</view>
					
					<view class="cu-item block"  style="margin-top: 20px;">
						<view class="content">
						<view class="text-red">测算结果只作参考</view>
						<view class="cu-btn bg-blue round recount" style="margin: 0 15%;width: 70%;" @click="hideModal">重新测算</view>
						</view>
					</view>
					<view class=" imgBottom">
						<view class="imgContent ">
							<image src="https://apitest.hrzhizhang.com/file/2020-11-27/qrcode.jpg" class="myCode" show-menu-by-longpress="true"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	<!-- 绑定 -->
	<goReg 
		ref="goReg" 
		:contentHeight="580"
	></goReg>
	<!-- 全局message组件 -->
	<quick-message ref="message"></quick-message>
	</view>
	
</template>

<script>
	import uniCitys from '@/components/citys-picker/uni-citys.vue';
	import goReg from "@/components/goReg";
	export default {
		components: {
			uniCitys,
			goReg,
		},
		data() {
			return {
				contractPay:'',
				avgPay:'',
				month:'',
				sPay:'',
				allPay:'',
				lessPay:'',
				address:'',
				age:'',
				modalName: null,
				// modalName: 'gridModal',
				gridCol: 3,
				gridBorder: false,
				menuBorder: false,
				menuArrow: false,
				menuCard: false,
				skin: false,
				listTouchStart: 0,
				listTouchDirection: null,
				sexPicker: ['男', '女'],
				sexIndex: -1,
				quitPicker: ['公司辞退', '员工辞职'],
				quitIndex: -1,
				addpayPicker: ['有', '无'],
				addpayIndex: 0,
				addPicker: ['有', '无'],
				addIndex: 1,
				mPicker: ['有', '无'],
				mIndex: 1,
				conPicker: ['有', '无'],
				conIndex: 0,
				employPicker: ['有', '无'],
				employIndex: 1,
				sex:'男',
				resultList:','
			};
		},
		methods: {
			goPage(page){
				uni.navigateTo({
					url: page
				})
			},
			async getResult(){
				// let uId = uni.getStorageSync('userId');
				let uId =1;
				if(uId>"0"&&uId!=undefined){
					let errMsg = '';
					if(this.sexIndex<0)errMsg = '请选择员工性别';
					if(this.employIndex<0)errMsg = '请选择是否有事实用工关系';
					if(this.conIndex<0)errMsg = '请选择是否签订劳动合同';
					if(this.mIndex<0)errMsg = '请选择工资发放时间是否有跨月';
					if(this.addIndex<0)errMsg = '请选择是否有加班';
					if(this.addpayIndex<0)errMsg = '请选择加班费是否足额支付';
					if(this.quitIndex<0)errMsg = '请选择离职方式';
					if(this.address=='')errMsg = '请选择合同约定地点';
					if(this.age<=0)errMsg = '请填写员工年龄';
					if(this.lessPay<=0)errMsg = '请填写最低工资标准';
					if(this.contractPay<=0)errMsg = '请填写合同约定工资数';
					if(this.allPay<=0)errMsg = '请填写全勤实际发放工资数';
					if(this.sPay<0)errMsg = '请填写实际购买社保基数';
					if(this.month<=0)errMsg = '请填写本单位工作月份数';
					if(this.avgPay<=0)errMsg = '请填写前12个月实发月平均工资';
					
					if(errMsg){
						uni.showToast({
							title:errMsg,
							icon:'none',
						});
						return;
					}
					// this.modalName = 'gridModal';
					let param = {
						gender:parseInt(this.sexIndex)+1,
						user_id:uId,
						age:this.age,
						relation:parseInt(this.employIndex)+1,
						contract:parseInt(this.conIndex)+1,
						city:this.address,
						wage_standard:this.lessPay,
						contract_wage:this.contractPay,
						actual_pay:this.allPay,
						next_month:parseInt(this.mIndex)+1,
						security_base:this.sPay,
						overtime:parseInt(this.addIndex)+1,
						pay_full:parseInt(this.addpayIndex)+1,
						work_month:this.month,
						average_wage:this.avgPay,
						quit_way:parseInt(this.quitIndex)+1,
						};
					 
					let data = await this.$http.post(
						'employmentRisk', //可以直接放链接(将不启用全局定义域名)
						param, 
					);
					this.resultList = data;
					console.log(data);
					this.modalName = 'gridModal';
					// uni.showToast({
					// 	title:data,
					// 	duration:2000,
					// 	icon:'none'
					// })
					return;
				}
				
				this.$refs.goReg.showModal('regModal');	
				return;
				
			},
			showInfo(msg){
				this.$refs.message.show({
					type:'default', //String 默认default
					msg:msg, //String 显示内容 *
					direction:'center', //String 默认顶部显示
					icon:false, //Boolean|String 显示icon(false/true/string 默认显示icon)
					mask:true, //Boolean 遮罩（默认false没有遮罩）
					// time:5000, //Number|Boolean 默认3000/false为不自动关闭
					customStyle:{ //自定义样式
							color:'#FFFFFF', //字体图标色
							backgroundColor:'rgba(0,0,0,.5)' //背景色
					}, 
					iconSize: 16, //Number 自定义icon大小(单位px 默认16 设置后会覆盖自定义样式里的设置优先级最高)
					iconColor: '', //String icon颜色(默认主题颜色 设置后会覆盖自定义样式里的设置优先级最高)
				})
				// uni.showToast({
				// 	title:msg,
				// 	icon:'none',
				// 	duration: 2000
				// })
			},
			sexChange(e) {
				this.sexIndex = e.detail.value
			},
			employChange(e) {
				this.employIndex=0
				if(e.detail.value){
					this.employIndex=1;
				}
				console.log(this.employIndex)
			},
			conChange(e) {
				this.conIndex=0
				if(e.detail.value){
					this.conIndex=1;
				}
			},
			mChange(e) {
				this.mIndex=0
				if(e.detail.value){
					this.mIndex=1;
				}
			},
			addChange(e) {
				this.addIndex=0
				if(e.detail.value){
					this.addIndex=1;
				}
			},
			addpayChange(e) {
				this.addpayIndex=0
				if(e.detail.value){
					this.addpayIndex=1;
				}
			},
			quitChange(e) {
				this.quitIndex = e.detail.value
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			cityPicker(val){
				 this.address=val.city;
				 this.lessPay=parseFloat(val.minimum_wage);
			},
			
		}
	}
</script>

<style>
	.page {
		height: 100%;
		width: 100%;
		min-height: 850px;
		background: #F6F6F6;
		
		
	}
	.cu-list.menu>.bottom{
		position: fixed !important;
		width: 100%;
		bottom: 10px;
		background: transparent;
		margin-left: -10px;
		padding: 0;
	}
	
	.cu-list{
		/* height: 800px; */
		background: #FFFFFF;
		box-shadow: 0px 3px 6px rgba(142, 228, 255, 0.12);
		opacity: 1;
		border-radius: 10px;
		margin: 20px 10px;
	}
	.cu-btn{
		height: 80rpx !important;
		width: 80%;
		margin: 0 10%;
		box-shadow: 0px 3px 6px #4CA5FE;
	}
	.content>image{
		width: 15px !important;
		height: 12px;
	}
	.input{
		text-align: right;
		font-size: 12px;
		max-width: 70px;
	}
	.menulist{
		margin-bottom: 50px;
	}
	.imgBottom{
		height: 150px;
	}
	.imgContent{
		height: 100px;
		padding: 0;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 10px;
		margin: 10px 5% ;
		width: 90%;
	}
	.myCode{
		width: 100%;
		height: 100px;
	}
	uni-switch::before{
		content: "否";
	}
	uni-switch::after{
		content: "是";
	}
	switch::before{
		content: "否";
	}
	switch::after{
		content: "是";
	}
	.page.show {
		overflow: hidden;
	}
	.recount{
		width: 100%;
		margin-bottom: 5px;
	}
	.cu-btn{
		height: 44px;
	}
	.input{
			text-align: right;
			font-size: 12px;
		}
	.switch-sex::after {
		content: "\e716";
	}

	.switch-sex::before {
		content: "\e7a9";
	}

	.switch-music::after {
		content: "\e66a";
	}

	.switch-music::before {
		content: "\e6db";
	}
</style>
